<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食订餐系统 - 登录</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/auth.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>美食订餐系统</h1>
            <nav id="nav-menu">
                <a href="index.html" class="active">首页</a>
                <a href="menu.html">菜单</a>
                <a href="orders.html">我的订单</a>
                <div id="auth-buttons">
                    <button id="login-btn" class="btn">登录</button>
                    <button id="register-btn" class="btn btn-outline">注册</button>
                </div>
                <div id="user-menu" style="display: none;">
                    <span id="username-display"></span>
                    <button id="logout-btn" class="btn btn-outline">退出</button>
                </div>
            </nav>
        </div>
    </header>

    <main class="container auth-container">
        <div class="auth-tabs">
            <button class="tab-btn active" data-tab="login">登录</button>
            <button class="tab-btn" data-tab="register">注册</button>
        </div>

        <form id="login-form" class="auth-form active">
            <div class="form-group">
                <label for="login-username">用户名</label>
                <input type="text" id="login-username" required>
            </div>
            <div class="form-group">
                <label for="login-password">密码</label>
                <input type="password" id="login-password" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block">登录</button>
            <div id="login-error" class="error-message"></div>
        </form>

        <form id="register-form" class="auth-form">
            <div class="form-group">
                <label for="register-username">用户名</label>
                <input type="text" id="register-username" required>
            </div>
            <div class="form-group">
                <label for="register-email">邮箱</label>
                <input type="email" id="register-email" required>
            </div>
            <div class="form-group">
                <label for="register-password">密码</label>
                <input type="password" id="register-password" required>
            </div>
            <div class="form-group">
                <label for="register-confirm">确认密码</label>
                <input type="password" id="register-confirm" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block">注册</button>
            <div id="register-error" class="error-message"></div>
        </form>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2023 美食订餐系统. 保留所有权利.</p>
        </div>
    </footer>

    <script src="assets/js/api.js"></script>
    <script src="assets/js/auth.js"></script>
</body>
</html>